{% extends 'index.html' %}

{% block sidebar %}
    <li><a href="/version-control/">版本管理</a></li>
    {% for row in all_project %}
        <li {% if row.id == project.id %} class="active"{% endif %}><a
                href="{% url 'version_control' row.id %}">{{ row.name }}</a></li>
    {% endfor %}
{% endblock %}

{% block content %}
    <h3 class="page-header">
        {{ project.name }}
    </h3>
    <form id="actionForm" class="form-horizontal" role="form" method="post">
        {% csrf_token %}
        <input type="hidden" name="selected_ids"/>
        <div class="form-group">
            <div class="row">
                <label for="" class="col-sm-1 control-label">
                    {{ form_obj.branch.label }}
                </label>
                <div class="col-md-3 col-sm-3">
                    {{ form_obj.branch }}
                </div>
                <label for="" class="col-sm-1 control-label">
                    {{ form_obj.action.label }}
                </label>
                <div class="col-md-3 col-sm-3">
                    {{ form_obj.action }}
                </div>
                <div class="col-sm-1" style="margin-left: 15px">
                    <button id="doAction" type="button" class="btn btn-info ">执行</button>
                </div>
            </div>
        </div>
    </form>
    <div class="table-responsive">
        <table class="table table-striped">
            <thead>
            <tr>
                <th><input type="checkbox" role="action_choice_all"></th>
                <th>子模块名</th>
                <th>子模块描述</th>
            </tr>
            </thead>
            <tbody>
            {% for row in query_set %}
                <tr>
                    <td><input type="checkbox" role="action_choice_one" value="{{ row.id }}"></td>
                    <td>{{ row.name }}</td>
                    <td>{{ row.description }}</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>

    <div class="modal fade" id="DoActionMsg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true" data-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel"><span id="label">执行中</span><span id="progress"></span>
                    </h4>
                </div>
                <div class="modal-body"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">确认</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
{% endblock %}

{% block custome_js %}
    <script>
        $(function () {
            $('#doAction').click(function () {
                if($('[name="action"]').val()!='build'){
                    var selected_ids = [];     // 获取选中子模块的id
                    $(':checkbox[role="action_choice_one"]:checked').each(function () {
                        selected_ids .push($(this).val());
                    });
                    $('[name="selected_ids"]').val(selected_ids);
                }
            $('#label').text('执行中');
                $('#DoActionMsg .modal-body').text('');
                $('#DoActionMsg .modal-body').text('请稍等...');
                $('#DoActionMsg').modal();
                var flag = false;
                $('#DoActionMsg').on('hide.bs.modal',
                    function () {
                        if (flag) {
                            return true;
                        } else {
                            return false;
                        }
                    });
                var interval_obj = setInterval(function () {
                    if ($('#progress').text().length < 3) {
                        text = $('#progress').text() + '.';
                        $('#progress').text(text);
                    } else {
                        $('#progress').text('');
                    }
                }, '1000');

                $.ajax({
                    url: "",
                    type: 'POST',
                    data: $('#actionForm').serialize(),
                    data: {'branch': $('[name="branch"]').val(),
                           'action': $('[name="action"]').val(),
                           'selected_ids': $('[name="selected_ids"]').val()},
                    dataType: 'JSON',
                    success: function (res) {
                        if (res.status) {
                            $('#label').text('执行完毕');
                            $('#DoActionMsg .modal-body').text('执行成功!')
                        } else {
                            $('#label').text('执行异常');
                            $('#DoActionMsg .modal-body').text(res.error);
                        }
                        $('[name="selected_ids"]').val('');
                        clearInterval(interval_obj);
                        $('#progress').text('');
                        flag = true;
                    },
                    error: function (res) {
                        $('#DoActionMsg .modal-body').text('系统繁忙，请稍候再试');
                        $('[name="selected_ids"]').val('');
                        clearInterval(interval_obj);
                        $('#label').text('执行异常');
                        $('#progress').text('');
                        flag = true;
                    }
                });
            });
            $(':checkbox[role="action_choice_all"]').click(function () {
                if ($(this).prop('checked')) {
                    $(':checkbox[role="action_choice_one"]').each(function () {
                        $(this).prop('checked', true)
                    })
                }
                else {
                    $(':checkbox[role="action_choice_one"]').each(function () {
                        $(this).prop('checked', false)
                    })
                }
            });
            $(':checkbox[role="action_choice_one"]').click(function () {
                if ($(this).prop('checked')) {
                    var flag = true;
                    $(':checkbox[role="action_choice_one"]').each(function () {
                        if (!$(this).prop('checked')) {
                            flag = false;
                            return false;
                        }
                    });
                    if (flag) {
                        $(':checkbox[role="action_choice_all"]').prop('checked', true);
                    }
                }
                else {
                    $(':checkbox[role="action_choice_all"]').prop('checked', false);
                }
            });
        });
    </script>
{% endblock %}